<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> -->
    <div class="card-body">
      <!-- 选择猫咪按钮 -->
      <div class="input">
        我有：<el-input-number
          :controls="false"
          v-model="num"
          controls-position="right"
          step-strictly
          :min="1"
          :max="10"
        ></el-input-number>
        只猫
        <div class="input-day">
          要做:
          <el-input-number
            :controls="false"
            v-model="day"
            controls-position="right"
            step-strictly
            :min="1"
          ></el-input-number>
          天饭
        </div>
        <div class="primary-btn">
          <el-button type="success" @click="getTable">确定</el-button>
        </div>
      </div>
      <!-- 输入值 -->
      <transition name="el-fade-in-linear">
        <div class="card-body__form" v-if="catNumber">
          <p class="p-title">请在表格中填写猫咪的信息，名称可不填</p>
          <el-form
            ref="form"
            :rules="rules"
            :model="form[count - 1]"
            v-for="count in catNumber"
            :key="count"
            class="demo-form-inline"
            :inline="true"
          >
            <span>猫咪{{ count }}</span>
            <el-form-item label="名称">
              <el-input size="small" v-model="form[count - 1].name"></el-input>
            </el-form-item>
            <el-form-item label="年龄(月)" prop="age">
              <el-input-number
                size="small"
                :min="0"
                :max="150"
                v-model="form[count - 1].age"
                :controls="false"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="体重(kg)" prop="weight">
              <el-input-number
                size="small"
                v-model="form[count - 1].weight"
                :controls="false"
              ></el-input-number>
            </el-form-item>
          </el-form>

          <p></p>
          <el-button type="success" @click="getResult">确定</el-button>
        </div>
      </transition>
    </div>
    <!-- 计算结果 -->
    <transition name="el-zoom-in-center">
      <div class="count-result" v-if="tableData.length">
        <p>以下为计算结果</p>
        <!-- 文字统计 -->
        <div class="count-result__text">
          <el-card class="box-card">
            统计：所有的猫猫一天要吃 <span>{{ dayEat }}g</span> 饭，猫猫们
            {{ day }} 天一共要吃 <span>{{ dayEat * day }}g</span> 饭</el-card
          >
        </div>
        <!-- 表格猫咪食量 -->
        <div class="count-result__table1">
          <el-table :data="tableData" stripe style="width: 100%;">
            <el-table-column prop="num" label="编号" align="center">
            </el-table-column>
            <el-table-column prop="name" label="姓名" align="center">
            </el-table-column>
            <el-table-column prop="age" label="年龄(月)" align="center">
            </el-table-column>
            <el-table-column prop="weight" label="体重(kg)" align="center">
            </el-table-column>
            <el-table-column prop="eat" label="饭量(天/g)" align="center">
            </el-table-column>
          </el-table>
        </div>
        <!--  -->
        <div class="count-result__table2" v-if="dayEat > 0">
          <el-tabs v-model="activeName">
            <el-tab-pane label="使用原表格" name="original"
              ><Original :dayEat="dayEat" :day="day"
            /></el-tab-pane>
            <el-tab-pane label="自定义表格" name="diy"
              ><Diy :dayEat="dayEat" :day="day"
            /></el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </transition>
  </div>
</template>

<script lang="ts" src="./index.ts"></script>

<style scoped lang="scss" src="./index.scss" />
